<template>
  <div id="app">
    <!-- <Background />
    <div class="sections">
      <Section title="Section 1" @click="showDetails('Section 1 details')" />
      <Section title="Section 2" @click="showDetails('Section 2 details')" />
      <Section title="Section 3" @click="showDetails('Section 3 details')" />
    </div>
    <Butterfly />
    <Flower /> -->
    <Home />
  </div>
</template>

<script setup>
import Background from './components/Background.vue'
import Section from './components/Section.vue'
import Butterfly from './components/Butterfly.vue'
import Flower from './components/Flower.vue'

import Home from './views/Home.vue';

</script>

<style>
#app {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.sections {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>